<template>
  <el-container class="app-container">
    <el-header>
      <div class="header-content">
        <div class="logo">
          <router-link to="/">房屋租赁系统</router-link>
        </div>
        <div class="nav-menu">
          <el-menu
            mode="horizontal"
            :router="true"
            :default-active="activeMenu"
          >
            <template v-for="item in menuItems" :key="item.index">
              <el-menu-item :index="item.index">{{ item.label }}</el-menu-item>
            </template>
          </el-menu>
        </div>
        <div class="user-menu">
          <template v-if="isLoggedIn">
            <el-dropdown @command="handleCommand">
              <span class="user-info">
                {{ username }}
                <el-icon><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <template v-else>
            <el-button type="primary" @click="$router.push('/login')">登录</el-button>
            <el-button @click="$router.push('/register')">注册</el-button>
          </template>
        </div>
      </div>
    </el-header>

    <el-main>
      <router-view></router-view>
    </el-main>

    <el-footer>
      <div class="footer-content">
        <p>© 2024 房屋租赁系统. All rights reserved.</p>
      </div>
    </el-footer>
  </el-container>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from './stores/user'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const activeMenu = computed(() => route.path)
const isLoggedIn = computed(() => userStore.isLoggedIn)
const username = computed(() => userStore.username)
const userRole = computed(() => userStore.userRole)

const handleCommand = (command) => {
  switch (command) {
    case 'profile':
      router.push('/user')
      break
    case 'logout':
      userStore.clearUserInfo()
      ElMessage.success('退出成功')
      router.push('/login')
      break
  }
}

// 动态菜单
const menuItems = computed(() => {
  if (!isLoggedIn.value) return []
  if (userRole.value === 'admin') {
    return [
      { index: '/', label: '首页' },
      { index: '/admin/users', label: '用户管理' },
      { index: '/house/publish', label: '房源管理' },
      { index: '/news', label: '消息' }
    ]
  } else if (userRole.value === 'landlord') {
    return [
      { index: '/', label: '首页' },
      { index: '/house/publish', label: '发布房源' },
      { index: '/news', label: '消息' }
    ]
  } else if (userRole.value === 'tenant') {
    return [
      { index: '/', label: '首页' },
      { index: '/news', label: '消息' }
    ]
  }
  return []
})
</script>

<style scoped>
.app-container {
  min-height: 100vh;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo {
  font-size: 20px;
  font-weight: bold;
}

.logo a {
  color: #409EFF;
  text-decoration: none;
}

.nav-menu {
  flex: 1;
  margin: 0 40px;
}

.user-menu {
  display: flex;
  gap: 10px;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.el-header {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  padding: 0 20px;
}

.el-main {
  background-color: #f5f7fa;
  padding: 20px;
}

.el-footer {
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
  padding: 20px;
  text-align: center;
  color: #666;
}
</style>
